<template>
  <!--会签管理-审批设置列表-材料结算设置弹窗-表单-->
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled" class="scroll-view" style="height: 600px">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <!-- <a-row v-for="(item, index) in model.people" :key="index">
            <a-col>
              <a-form-model-item>
                <a-input v-model="item.people1" placeholder="请" style="width: 300px;height: 70px;"></a-input>
                <a style="margin-left:50px " @click="submitPeople">审批人</a>
              </a-form-model-item>
            </a-col>
            <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
          </a-row>
          <div style="display: inline-block; margin-left: 150px">
            <a-button type="dashed" @click="addRcruit">
              <a-icon type="plus" />
            </a-button>
          </div> -->

          <a-row v-for="(item, index) in list" :key="index">
            <a-col
              style="
                width: 300px;
                height: 50px;
                border: 1px solid black;
                text-align: center;
                line-height: 50px;
                display: inline-block;
                margin-right: 30px;
              "
            >
              <a-checkbox @change="onChange1(item.approver, item.number, item.departId)"
                >{{ item.depart }} {{ item.name }} {{ index + 1 }}
              </a-checkbox>
            </a-col>
            <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />

            <!-- <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="2"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
              <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="3"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
              <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="4"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
              <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="5"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
              <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="6"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
              <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="7"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
              <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="8"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
              <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="9"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" />
              <a-col
                style="
                  width: 300px;
                  height: 50px;
                  border: 1px solid black;
                  text-align: center;
                  line-height: 50px;
                  display: inline-block;
                  margin-right: 30px;
                "
              >

                <a-checkbox value="10"> A </a-checkbox>
              </a-col>
              <a-icon type="arrow-down" style="font-size: 30px; display: block; margin-left: -400px" /> -->
          </a-row>

          <div
            style="
              width: 400px;
              height: 50px;
              border: 1px solid black;
              text-align: center;
              line-height: 50px;
              display: inline-block;
              margin-right: 30px;
            "
          >
            流程结束
          </div>
        </a-form-model>
      </j-form-container>

      <j-modal
        class="modal-privacy"
        :width="width"
        :title="titleDepart"
        :visible="visibleDepart"
        :disableScreenClick="true"
        okText="确定"
        cancelText="取消"
        @cancel="cancelDepart"
        @ok="okPrivacyDepart"
      >
        <a-row>
          <a-col>
            <a-form-model-item label="所属项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
              <a-select
                :options="levelOneOptions"
                v-model="model.projectId"
                placeholder="请选择项目"
                style="width: 90%"
                @change="changeLevelOne"
              ></a-select>
              <!-- <span style="color: red; font-size: 16px">请选择所属项目,此项为必填</span> -->
            </a-form-model-item>
          </a-col>
          <a-col>
            <a-form-model-item label="部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
              <a-select
                :options="levelTwoOptions"
                v-model="model.departId"
                placeholder="请选择项目"
                style="width: 90%"
                @change="changeLevelTwo"
              ></a-select>
              <!-- <span style="color: red; font-size: 16px">请选择所属项目,此项为必填</span> -->
            </a-form-model-item>
          </a-col>
        </a-row>
      </j-modal>
      <j-modal
        class="modal-privacy"
        :width="width"
        :title="titlePeople"
        :visible="visiblePeople"
        :disableScreenClick="true"
        okText="确定"
        cancelText="取消"
        @cancel="cancelPrivacyPeople"
        @ok="okPrivacyPeople"
      >
        <a-row>
          <a-col :span="24">
            <!-- <a-form-model-item label="所属项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
              <a-select
                :options="levelOneOptions1"
                v-model="model.projectId"
                placeholder="请选择项目"
                style="width: 90%"
                @change="changeLevelOne1"
              ></a-select>
            </a-form-model-item> -->
          </a-col>
        </a-row>
        <a-row>
          <a-tree
            title="title"
            @check="onCheck"
            @expand="onExpand"
            @select="onTreeNodeSelect"
            :checkedKeys="checkedKeys"
            :treeData="treeData"
            :selectedKeys="selectedKeys"
            :expandedKeys="expandedKeysss"
            :checkStrictly="checkStrictly"
          >
            <template #title="data">
              <div v-if="data.isUser">
                <div style="display: flex; flex-direction: row">
                  <a-icon type="user" style="line-height: 26px" />
                  <div>
                    <!-- <a-checkbox-group  :options="options" @change="(c) => {onChange(c,data.id)}"   >
                  </a-checkbox-group> -->
                    <a-radio
                      @change="
                        (c) => {
                          onChange(c, data.id, data.post, data.realname)
                        }
                      "
                    ></a-radio>
                  </div>
                  <span style="width: 4rem">{{ data.realname }}</span>
                </div>
              </div>
              <!-- ({{data.children.length || 0}}人) -->
              <div v-else>{{ data.title }}</div>
            </template>
            <!-- <a-checkbox-group @change="onChange" v-model="checkboxChecked" v-if="treeData.length > 0">
            <a-col :span="24" v-for="(item, index) in treeData" :key="index" >
              <a-checkbox :value="item.id">{{item.isUserList}}0000000{{ item.realname }}</a-checkbox>
            </a-col>
          </a-checkbox-group> -->
          </a-tree>
        </a-row>
      </j-modal>
      <!-- <wt-depart-modal ref="modalForm" @ok="modalFormOk"></wt-depart-modal> -->
      <!-- <wt-peopel-modal ref="modalForm1" @ok="modalFormOk"></wt-peopel-modal> -->
    </a-spin>
  </template>

  <script>
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { queryUserOtherTreeList } from '@/api/api'
  import { log } from 'util'
  const options = [{ label: '', value: '0' }]
  export default {
    name: 'WtBrandForm',
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false,
      },
    },
    data() {
      return {
        width: 800,
        // visibleDepart: false,
        visiblePeople: false,
        value: [],
        titlePeople: '选择审批部门负责人',
        options,
        treeData: [],
        checkedKeys: [],
        expandedKeysss: [],
        quanxian: [],
        warehouseId: '',
        templateId: '',
        id: '',
        post: '',
        realname: '',
        list: [
          { name: '林海英', approver: '1598150443403411458', depart: '招采部', number: 1, departId: '9b20ec15630a4d6fb8b46f4026c44006' },
          { name: '许阿东', approver: '1598149978670333953', depart: '新324国道', number: 2, departId: '7632ca37c06e4e809d095be3156b93b0' },
          { name: '陈团祥', approver: '1638803200115503106', depart: '管理部', number: 3, departId: '2b47dab974ca4820b2c481a35a81d818' },
          { name: '卢敬俊', approver: '1598152268672237569', depart: '项目财务部', number: 4, departId: '954e8e0670e9496c989e6676874288bb' },
          { name: '林晖', approver: '1598153926626082817', depart: '集团总部', number: 5, departId: '63b00e4514af41648cb3dd79d2813591' },
          { name: '李卿', approver: '1638803541166944257', depart: '管理部', number: 6, departId: '2b47dab974ca4820b2c481a35a81d818' },
          { name: '郭建海', approver: '1638803429745258498', depart: '管理部', number: 7, departId: '2b47dab974ca4820b2c481a35a81d818' },

        ],
        model: {
          people: [
            {
              people1: '',
            },
          ],
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {},

        treeData1: [],

        // url: {
        //   add: '/countersign/wtCountersignTemplateProcess/addBatch',
        //   edit: '/wtBrand/edit',
        //   queryById: '/wtBrand/queryById',
        // },
      }
    },
    computed: {
      // formDisabled() {
      //   return this.disabled
      // },
    },

    created() {
      //备份model原始值
      this.loadTree()
      this.loadData()
      // this.modelDefault = JSON.parse(JSON.stringify(this.model))
    },
    methods: {
      onChange1(approver, number, departId) {
        // console.log('ewq',c);
        console.log('approver = ', approver)
        console.log('number = ', number)
        console.log('departId = ', departId)
        if (this.quanxian.length > 0) {
          var index = this.quanxian.findIndex(item => item.approver=== approver)
          if (index == -1) {
            this.$set(this.quanxian, this.quanxian.length, {approver: approver, number: number, 'departId': departId})
          } else {
            this.quanxian.forEach((item, index) => {
              if(item.departId=== departId) {
                this.quanxian.splice(index, 1)
              }
            })
          }
        } else  {
          this.$set(this.quanxian, 0, {approver: approver, number: number, 'departId': departId})
        }
        console.log('打印:', this.quanxian)
      },
      okPrivacyPeople() {
        this.visiblePeople = false
      },
      cancelPrivacyPeople() {
        this.visiblePeople = false
      },
      // okPrivacyDepart() {
      //   this.visibleDepart = false
      // },
      // cancelDepart() {
      //   this.visibleDepart = false
      // },
      // submitDepart() {
      //   this.visibleDepart = true

      //   //  console.log('fdw');
      // },
      submitPeople(e) {
        this.visiblePeople = true
        //  console.log('fdw');
      },
      onExpand(expandedKeys) {
        // console.log('onExpand')
        this.expandedKeysss = expandedKeys
        this.autoExpandParent = false
      },
      onTreeNodeSelect(id) {
        // console.log('onTreeNodeSelect')
        if (id && id.length > 0) {
          this.selectedKeys = id
        }
        // this.$refs.datarule.show(this.selectedKeys[0],this.roleId)
      },
      add() {
        this.edit(this.modelDefault)
      },
      edit(record) {
        // this.model = Object.assign({}, record)
        this.visible = true
        // this.loadData()
        this.templateId = record.id
        // console.log('d5432', this.templateId);
        // console.log('fedw',record);
        this.loadTree(this.templateId)

      },
      loadTree(id) {
        //   getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
        //     if (res.success) {
        //     this.treeData1 = []
        //     let treeList1 = res.result
        //     for (let a = 0; a < treeList1.length; a++) {
        //       let temp = treeList1[a]
        //       temp.isLeaf = temp.leaf
        //       this.treeData1.push(temp)
        //     }
        //   }
        // })
        getAction(`/countersign/wtCountersignTemplateProcess/getList?templateId=${id}`).then((res) => {
          if (res.success) {
            this.treeData1 = []
            let treeList1 = res.result
            for (let a = 0; a < treeList1.length; a++) {
              let temp = treeList1[a]
              temp.isLeaf = temp.leaf
              this.treeData1.push(temp)
            }
          }
        })
      },
      loadData(id) {
        var that = this
        queryUserOtherTreeList().then((res) => {
          var mergeUserListAndChildren = (arr = []) => {
            if (arr.length > 0) {
              let tmp = []
              arr.forEach((item, index) => {
                let children = []
                if (!!item.children && item.children.length > 0) {
                  children = mergeUserListAndChildren(
                    item.children.map((cItem) => {
                      return {
                        ...cItem,
                        isLeaf: false,
                        title: cItem.title,
                      }
                    })
                  )
                }
                if (!!item.userList && item.userList.length > 0) {
                  children = children.concat(
                    item.userList.map((item) => ({ ...item, key: item.id, isUser: 1, selectable: false }))
                  )
                }
                tmp.push({
                  ...item,
                  children,
                })
              })
              return tmp
            }
            return []
          }
          this.treeData = mergeUserListAndChildren(res.result)
        })
      },

      onChange(c, id, post, realname) {
        this.post = post //职务
        this.realname = realname //名字
        this.id = id //用户id
      },
      addRcruit() {
        this.model.people.push({})
      },
      submitForm() {
        const that = this
        // 触发表单验证

        httpAction(
          '/countersign/wtCountersignTemplateProcess/addBatch',
          {
            templateId: that.templateId, //审批模板id
            list:that.quanxian
          },
          'POST'
        )
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
          })
        // this.$refs.form.validate((valid) => {
        //   if (valid) {
        //     that.confirmLoading = true
        //     let httpurl = ''
        //     let method = ''
        //     if (!this.model.id) {
        //       httpurl += this.url.add
        //       method = 'post'
        //     } else {
        //       httpurl += this.url.edit
        //       method = 'put'
        //     }
        //     httpAction(httpurl, this.model, method)
        //       .then((res) => {
        //         if (res.success) {
        //           that.$message.success(res.message)
        //           that.$emit('ok')
        //         } else {
        //           that.$message.warning(res.message)
        //         }
        //       })
        //       .finally(() => {
        //         that.confirmLoading = false
        //       })
        //   }
        // })
      },
    },
  }
  </script>
  <style scoped>
  .scroll-view {
    overflow: auto;
    overflow-y: scroll;
  }
  .container {
    width: 1000px;
    height: 1000px;
  }
  </style>